<template>
  <div id="bottomleft">
    <div class="centerTitle">
      <div class="asTitle">物联网</div>
    </div>
    <div class="up">
      <div class="item" v-for="item in titleItem" :key="item.title">
        <!-- 小块块上的字体设置 -->
        <p class="ml-3 h-24 colorBlue fw-b fs-xxxxl">{{ item.title }}</p>
        <div class="dv-dig-flop ml-1 mt-10 pl-3">
          {{ item.number.number[0] }}
        </div>
      </div>
    </div>
    <div class="down">
      <div class="ranking">
        <!-- <div id="manage-line" class="chart-con"></div> -->
        <dv-capsule-chart class="chart-con" :config="config" />
      </div>
    </div>
  </div>
</template>

<script>
// import echarts from "echarts";
export default {
  data() {
    return {
      config: {
        data: [
          {
            name: "智慧城市",
            value: 167,
          },
          {
            name: "车联网",
            value: 67,
          },
          {
            name: "智能抄表用户数",
            value: 123,
          },
        ],
      },
      titleItem: [
        {
          title: "开卡数",
          number: {
            number: [120],
            toFixed: 1,
            textAlign: "left",
            content: "{nt}",
            style: {
              fontSize: 36,
            },
          },
        },
        {
          title: "客户数",
          number: {
            number: [18],
            toFixed: 1,
            textAlign: "left",
            content: "{nt}",
            style: {
              fontSize: 36,
            },
          },
        },
        {
          title: "激活数",
          number: {
            number: [18],
            toFixed: 1,
            textAlign: "left",
            content: "{nt}",
            style: {
              fontSize: 36,
            },
          },
        },
      ],
    };
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.drawManage();
    // });
  },
  methods: {
    // drawManage() {
    //   var myChart = this.$echarts.init(document.getElementById("manage-line"));
    //   var option = {
    //     grid: {
    //       left: "3%",
    //       right: "4%",
    //       bottom: "3%",
    //       containLabel: true,
    //     },
    //     xAxis: {
    //       type: "value",
    //       boundaryGap: [0, 0.01],
    //       axisLabel: {
    //         rotate: 60,
    //       },
    //       axisLine: {
    //         lineStyle: {
    //           color: "#ffffff",
    //         },
    //       },
    //     },
    //     yAxis: {
    //       type: "category",
    //       data: ["智慧城市", "车联网", "智能抄表用户数"],
    //       axisLine: {
    //         lineStyle: {
    //           color: "#ffffff",
    //         },
    //       },
    //     },
    //     series: [
    //       {
    //         name: "2011",
    //         type: "bar",
    //         data: [104970, 131744, 60230],
    //       },
    //     ],
    //   };
    //   myChart.setOption(option, true);
    //   window.addEventListener("resize", () => {
    //     myChart.resize();
    //   });
    // },
  },
  components: {},
};
</script>
<style lang="scss" scoped>
#bottomleft {
  display: flex;
  height: 48vh;
  flex-direction: column;
  .centerTitle {
    flex: 1;
    padding: 0.15vh 0.15vh;
    text-align: left;
    font-size: 2vw;
    font-weight: bold;
    .asTitle {
      padding-left: 2vw;
      // 使用相对位置让问题垂直居中
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .up {
    flex: 1;
    width: 95%;
    margin: 0.3vh auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    .item {
      text-align: center;
      border-radius: 6px;
      padding-top: 12px;
      margin-top: 18px;
      width: 33%;
      .dv-dig-flop {
        font-size: 2vw;
      }
    }
  }
  .down {
    // height: 10vh;
    flex: 3;
    padding: 6px 4px;
    padding-bottom: 0;
    justify-content: space-between;
    .ranking {
      margin: 0 auto;
      padding: 0.1vh;
      width: 90%;
      .chart-con {
        padding-top: 2vh;
        height: 20vh;
        width: 100%;
      }
    }
  }
}
</style>
